
<template>
  <div class="contentLayout customerListContainer">
		<pathTracking :path='path' />
    <div class="pageContent">
      <div class="createBtn" v-if="levelShow && createLevel">
        <div @click="createLevelBtn"><img src="@/assets/img/button_plus.png" class="iconPlus" />新建等级</div>
      </div>
      <div class="createBtn" v-if="equityShow && createRights">
        <div @click="createEquityBtn"><img src="@/assets/img/button_plus.png" class="iconPlus" />新建权益</div>
      </div>
      <div>
          <!--选项卡-->
          <el-tabs v-model="activeName" @tab-click="handleClick" class="customerTabNavs tabNavsBig">
              <!-- <el-tab-pane v-for="(tab,index) in tabNavs" :key="index" :label="tab.label" :name="tab.name" class="customerTabItem"> -->
                <el-tab-pane label="等级管理" name="manageLevel">
                    <div class="tableLayout">
                      <!--表格头部-->
                      <el-row>
                        <div class="tableTitle tableTitleBig">
                          <div class="tableIcon"></div>
                          <div class="tableText">等级列表</div>
                        </div>
                      </el-row>
                      <div class="tableInfo">
                        <el-table
                        :data='levelTableData'
                          >
                          <el-table-column
                            v-for="(item,index) in levelTableH"
                            v-if="item.prop == 'name' || item.prop == 'level' || item.prop == 'growthValue' || item.prop == 'updateTime' || item.prop == 'rights' || item.prop == 'createTime' || item.prop == 'status'"
                            :prop="item.prop"
                            :label="item.label"
                            :key="index"
                            :width="item.width"
                            align="center"
                          >
                          </el-table-column>

                          <el-table-column
                          align="center" 
                          v-else-if="item.prop== 'pictureUrl'"
                          :key="item.prop"
                          :prop="item.prop"
                          :label="item.label"
                          >
                          <template slot-scope="scope">
                            <el-tooltip placement="top" effect="light">
                              <div slot="content"><img class="maxTableImg" :src="scope.row.pictureUrl"></div>
                              <img class="mainTableImg" :src="scope.row.pictureUrl">
                            </el-tooltip>
                          </template>
                        </el-table-column>

                          <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                            <template slot-scope="scope">
                              <div class="tableBtn">
                                <button v-if="levelEdit" @click="levelEditBtn(scope.row)" class="editStatus">编辑</button>
                                <button v-if="scope.row.status == '启用' && levelEffet" class="deleteStatus" @click="deleteBtn(scope.row,1)">停用</button>
                                <button @click="enableBtn(scope.row,1)" v-if="scope.row.status == '停用' && levelUneffect" class="equityEnable">启用</button>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                        <!--分页-->
                        <!-- <el-row class="pagination-cont">
                          <el-pagination
                            @size-change="handleSizeChange"
                            background
                            @current-change="handleCurrentChange"
                            :current-page="paginationObject.pageNum"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="paginationObject.pageSize"
														:pager-count="5"
                            layout="sizes,prev, pager, next, jumper, slot"
                            :total="paginationObject.total">
                            <div class="pagination-slot">
                              显示
                              <p class="slot-i">{{paginationObject.num1}}</p>
                              到
                              <p class="slot-i">{{paginationObject.num2}}</p>
                              ，共
                              <p class="slot-i">{{paginationObject.total}}</p>
                              记录
                            </div>
                          </el-pagination> 
                        </el-row> -->
                      </div>
                      
                    </div>
                </el-tab-pane>
                <el-tab-pane label="权益管理" name="manageEquity">
                  <el-row>
                      <div class="tableTitle tableTitleBig" style="height:40px;">
                        <div class="tableIcon"></div>
                        <div class="tableText">查询条件</div>
                      </div>
                  </el-row>
                  <div>
                    <advancedSearch :option="equitySearchBox" @getChild="showChild"  @onSearch="toSearch" />
                  </div>
                  <div class="tableLayout" style="margin-top:10px;">
                    <el-row>
                        <div class="tableTitle tableTitleBig">
                          <div class="tableIcon"></div>
                          <div class="tableText">权益列表</div>
                        </div>
                      </el-row>
                    <!--表格内容-->
                    
                    <div class="tableInfo">
                      <el-table
                        :data='equityTableData'
                        >
                        <el-table-column
                          :fixed="item.fixed"
                          v-if="item.prop == 'sort' || item.prop == 'name' || item.prop == 'category' || item.prop == 'createTime' || item.prop == 'updateTime' || item.prop == 'status' || item.prop == 'description'"
                          v-for="(item,index) in equityTableH"
                          :prop="item.prop"
                          :label="item.label"
                          :key="index"
                          :width="item.width"
                          align="center"
                        >
                        </el-table-column>

                        <el-table-column
                        align="center" 
                        v-else-if="item.prop== 'onPictureUrl' ||  item.prop== 'offPictureUrl'"
                        :key="item.prop"
                        :prop="item.prop"
                        :label="item.label"
                        >
                          <template slot-scope="scope">
                            <el-tooltip placement="top" effect="light">
                              <div slot="content"><img class="maxTableImg" :src="scope.row[item.prop]" alt=""></div>
                              <img class="mainTableImg" :src="scope.row[item.prop]" alt="">
                            </el-tooltip>
                          </template>
                        </el-table-column>

                        <el-table-column
                          fixed="right"
                          label="操作"
                          width="200">
                          <template slot-scope="scope">

                            <div class="tableBtn">
                              <button v-if="rightsEdit" @click="equityEditBtn(scope.row)" class="editStatus">编辑</button>
                              <button v-if="scope.row.status == '启用' && rightsEffect" class="deleteStatus" @click="deleteBtn(scope.row,2)">停用</button>
                              <!-- <button @click="equityDelBtn(scope.$index, scope.row)" v-if="scope.row.status == '启用'" class="equityDel">停用</button> -->
                              <button @click="enableBtn(scope.row,2)" v-if="scope.row.status == '停用' && rightsUneffect" class="equityEnable">启用</button>
                            </div>
                          </template>
                        </el-table-column>
                      </el-table>
                      <!--分页-->
                        <el-row class="pagination-cont">
                          <el-pagination
                            @size-change="handleSizeChange"
                            background
                            @current-change="handleCurrentChange"
                            :current-page="paginationObject.pageNum"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="paginationObject.pageSize"
														:pager-count="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="paginationObject.total"
                          >
                            <!-- <div class="pagination-slot">
                              显示
                              <p class="slot-i">{{paginationObject.num1}}</p>
                              到
                              <p class="slot-i">{{paginationObject.num2}}</p>
                              ，共
                              <p class="slot-i">{{paginationObject.total}}</p>
                              记录
                            </div> -->
                          </el-pagination> 
                        </el-row>
                    </div>
                  </div>
                      
                </el-tab-pane>
          </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import pathTracking from '@/components/common/pathTracking'// 面包屑路径
import advancedSearch from '../components/pages/advancedSearch' // 搜索列表
import datas from './datas.js'
import {editLevel} from './axios.js'
import tabelcom from './../components/pages/table'
import verification from  '../components/js/verification'
import _axios from '@/tool/http.js'
// 获取按钮权限配置的方法
import operationConfig from '@/utils/btnsPermission'

export default {
  name: 'customerList',
  components: {
    pathTracking,
    advancedSearch,
    tabelcom,
  },
  data () {
    return {
      path: ['CRM', '客户管理', '会员等级'],
      tabNavs: datas.tabNavs, // 选项卡内容
      //checkTabNavs: datas.checkTabNavs, // 查看按钮选项卡内容
      // 选项卡选中
      activeName: 'manageLevel',
      //切换新建等级 权益按钮
      levelShow:true,
      equityShow:false,
      //isDisabledLeve:false,//是否禁用删除按钮
      //isDisabledEqu:false,

      equitySearchBox:datas.equitySearchBox,// 搜索框内容
      TableSelectData: [], // 表格选中的组
      equityTableH:datas.equityTableH,
      defaultData2:[
        {num:1}
      ],
      defaultData1:[
        {level:1}
      ],

      levelTableH: datas.levelTableH,
      levelTableData:[],//等级表格
      equityTableData:[],//权益表格
      searchData:{},//查询保存内容
      
      paginationObject:datas.paginationObject,
      currentPage4: 1,
      formLabelWidth: '120px',

      createLevel: false,
      createRights: false,
      levelEdit: false,
      levelEffet: false,
      levelUneffect: false,
      rightsEdit: false,
      rightsEffect: false,
      rightsUneffect: false
    }
  },
  methods: {
    //组装分页
    paginationFunction(that,obj) {
      that.paginationObject.pageNum = obj.pageNum; // 第几页
      that.paginationObject.pageSize = obj.pageSize; //  每页数量
      that.paginationObject.pageTotal = obj.pages; // 页总数
      that.paginationObject.total = obj.total; //总数

      if(obj.pageNum == 0){
        that.paginationObject.num1 = 0
      }else{
        that.paginationObject.num1 = (obj.pageNum-1)*obj.pageSize+1//num1
      }
      //num2
      if(obj.pages == obj.pageNum){
        that.paginationObject.num2 = obj.total;
      }else{
        that.paginationObject.num2 = obj.pageNum*obj.pageSize;
      }
    },
    createLevelBtn(){
      this.$router.push({name:'createLevel'})
    },
    createEquityBtn(){
      this.$router.push({name:'createEquity'})
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleClick(tab,event){
      //console.log(tab.name);
      tab.name = this.activeName;
      if(this.activeName == 'manageLevel'){
        this.levelShow = true;
        this.equityShow = false;
        this.getLevelData()
      }else if(this.activeName == 'manageEquity'){
        //this.$router.push({name:'equity'});
        //this.activeName == 'manageLevel'
        this.equityShow = true;
        this.levelShow = false;
        this.getEquityData()
      }
    },
    //编辑
    levelEditBtn(param){//表格 等级编辑按钮
      this.$router.push({name:'editLevel', query: {key: param.id}})
    },
    equityEditBtn (param) { //表格 权益编辑按钮
      //console.log('权益编辑id',param)
      this.$router.push({name: 'editEquity', query: {key: param.id}})
    },
    //启用
    enableBtn(rows,num){
      var that = this;
      var obj = {
        id:rows.id,
        status:true
      }
      this.$confirm('确定启用吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => { //确定
        switch(num){
            case 1:
                that.$ajax({
                  url:api.crm + '/levelInfo',
                  method:'PUT',
                  data:obj,
                }).then((res) => { //停用
                  //console.log('等级管理是否启用',res)
                  if(res.data.status == 200){
                    that.$message({
                      message: '操作成功',
                      type: 'success'
                    });
                    that.getLevelData()
                  }
                })
              break;
            case 2:
              that.$ajax({
                  url:api.crm + '/rightsConf',
                  method:'PUT',
                  data:obj,
                }).then((res) => { //停用
                  //console.log('权益管理是否启用',res)
                  if(res.data.status == 200){
                    
                    that.$message({
                      message: '操作成功',
                      type: 'success'
                    });
                    that.getEquityData(that.searchData)
                  }
                })          
        }
      }).catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: '已取消操作'
          // });          
      }); 
      
    },
    //删除
    deleteBtn(rows,num){
      var that = this;
      var obj = {
        id:rows.id,
        status:false
      }
      this.$confirm('确定停用吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //确定
        switch(num){
          case 1:
              that.$ajax({
                url:api.crm + '/levelInfo',
                method:'PUT',
                data:obj,
              }).then((res) => { //停用
                //console.log('等级管理是否停用',res)
                if(res.data.status == 200){
                  that.$message({
                    message: '操作成功',
                    type: 'success'
                  });
                  that.getLevelData()
                }
              })
            break;
          case 2:
          that.$ajax({
            url:api.crm + '/rightsConf',
            method:'PUT',
            data:obj,
          }).then((res) => { //停用
            //console.log('权益管理是否停用',res)
            if(res.data.status == 200){
              
              that.$message({
                message: '操作成功',
                type: 'success'
              });
              that.getEquityData(that.searchData)
            }
          })          
        }
      }).catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: '已取消操作'
          // });          
      });   
      
    },
    checkHandleClick (tab, event) {
      //console.log('看看选项卡',tab);
    },
    showChild (val) {
      //this.searchFromData = val
    },
    toSearch (val) {
      this.paginationObject.pageSize = 10;
      this.paginationObject.pageNum = 1;
      var levelOption = {
        name:val[0].value
      };
      this.searchData = levelOption;
      this.getEquityData(this.searchData)
    },
    handleSelectionChange (selection) {
      // 选中的数组
      this.TableSelectData = selection
    },
    selectedHighlight (data) {
      // 如果选中则添加高亮样式
      if (this.TableSelectData.indexOf(data.row) > -1) {
        return {
          'background-color': '#FEF6EE'
        }
        return {}
      }
    },
    // 分页
    handleSizeChange (val) { //每页多少条
      this.paginationObject.pageSize = val;
      this.getEquityData(this.searchData)
    },
    handleCurrentChange (val) {  //当前第几页
      this.paginationObject.pageNum= val;
      this.getEquityData(this.searchData)
    },

    //获取等级管理列表
    getLevelData(){
      var that = this;
			this.$ajax({
        url:api.crm + '/levelInfo/list/' + that.paginationObject.pageSize + '/' +that.paginationObject.pageNum,
				method:'GET',
			}).then((res) => {
        //console.log('会员等级',res);
        var data = res.data;
        that.levelTableData = [];
        if(data.status == 200){
          //console.log('pageTotal',data.result.pages)
          // that.paginationFunction(that,data.result);
          var levelArr = data.result.list;
          if(levelArr){
            var tdObj = {};
						for(var i = 0;i<levelArr.length;i++){
              tdObj = {
                id:levelArr[i].id,//级别
                level:levelArr[i].level,//级别
                name:levelArr[i].name,
                pictureUrl:levelArr[i].pictureUrl,//等级图片
                growthValue:levelArr[i].growthValue, //成长值
                rights:levelArr[i].rights,//会员权益
                createTime:levelArr[i].createTime,
                updateTime:levelArr[i].updateTime,
                status:levelArr[i].status
              }
              if(levelArr[i].status == true){
                tdObj.status = '启用'
              }else{
                tdObj.status = '停用'
              }
              that.levelTableData.push(tdObj)
            }
          }else{
            // that.$message({
						// 	message: '暂无数据',
						// 	type: 'warning'
						// });
          }
        }else{
          that.$message({
              message: '获取列表数据失败',
              type: 'warning'
          });
        }
      })
    },

    //获取权益管理
    getEquityData(parm){
      var that = this;
			this.$ajax({
        url:api.crm + '/rightsConf/list/'+ that.paginationObject.pageSize + '/' +that.paginationObject.pageNum,
        method:'POST',
        data:parm || {}
			}).then((res) => {
        console.log('会员权益',res);
        var data = res.data;
        that.equityTableData = [];
        if(data.status == 200){
          that.paginationFunction(that,data.result);
          var equityArr = data.result.list;
          var tdObj = {};
          if(equityArr){
              for(var i=0;i<equityArr.length;i++){
              tdObj = {
                id:equityArr[i].id,
                sort:equityArr[i].sort,
                name:equityArr[i].name,//权益名称
                category:equityArr[i].category,//权益分类
                onPictureUrl:equityArr[i].onPictureUrl,//已拥有状态图
                offPictureUrl:equityArr[i].offPictureUrl,//未拥有状态图
                createTime:equityArr[i].createTime,
                updateTime:equityArr[i].updateTime,
                status:equityArr[i].status,
                description:equityArr[i].description,//权益说明
              }
              if(equityArr[i].status == true){
                tdObj.status = '启用'
              }else{
                tdObj.status = '停用'
              }
              that.equityTableData.push(tdObj)
            }
          }else{
            that.$message({
							message: '暂无数据',
							type: 'warning'
						});
          }
        }
      }).catch((err) =>{
        that.$message({
            message: '获取列表数据失败',
            type: 'warning'
          });
      })
    },
    // 按钮权限
    btnsControl() {
      let permission = operationConfig(this.$route);
      this.createLevel = false
      this.createRights = false
      this.levelEdit = false
      this.levelEffet = false
      this.levelUneffect = false
      this.rightsEdit = false
      this.rightsEffect = false
      this.rightsUneffect = false
      permission.forEach(ele => {
        if(ele.menu_name === '新建等级') {
          this.createLevel = true
        }else if(ele.menu_name === '新建权益') {
          this.createRights = true
        }else if(ele.menu_name === '等级_编辑') {
          this.levelEdit = true
        }else if(ele.menu_name === '等级_启用') {
          this.levelEffet = true
        }else if(ele.menu_name === '等级_停用') {
          this.levelUneffect = true
        }else if(ele.menu_name === '权益_编辑') {
          this.rightsEdit = true
        }else if(ele.menu_name === '权益_启用') {
          this.rightsEffect = true
        }else if(ele.menu_name === '权益_停用') {
          this.rightsUneffect = true
        }
      })
    }
  },
	// watch:{
	// 	$route:{
	// 		handler(newValue,oldValue){
  //       if(newValue.name == 'memberScores'){
  //         this.getLevelData();
  //         this.getEquityData(this.searchData);
  //       }
	// 		}
  //   },
	// },
  activated(){
    this.getLevelData();
    this.getEquityData(this.searchData);
    this.btnsControl();
  },
  created(){
    this.getLevelData();
    //this.getEquityData();
    // this.btnsControl();
  }
}
</script>

<style>
@import '../components/css/viewCommon.css';
.el-message-box__status.el-icon-warning{
    display: none;
}

</style>

<style scoped>
.dr-form{
  border-radius: 0 0 8px 8px !important
}
.pageContent{
		    padding: 16px;
	}
.bread-nav{
  position: fixed;
  top: 144px;
  z-index: 99;
}
.endFormItem div:last-child .normal-btn{
  margin-right: 0 !important
}
.contentLayout .navContent{
  margin-top: 0 !important
}
.pagination-cont{
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.maxTableImg {
    display: block;
    width: 200px;
    height: 200px;
    cursor: pointer;
}
.mainTableImg{
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.createBtn div{
		background-color: #7e6b5a;
    color: #fff;
    height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
    width: 100px;
    border-radius: 20px;
    font-size: 14px;
		border: 0
	}
	.createBtn div:hover,.createBtn div:active,.createBtn div:focus{
		background-color: #7e6b5a;
		color: #fff;
		cursor: pointer;
	}

.tableLayout{
  background-color: #fff;
  margin-top: 0px;
  border-radius: 8px
}
.tableLayout .el-table{
  /* padding: 0 16px */
}
.tableLayout .tableInfo{
  padding: 0 16px
}
.el-dialog .el-dialog__body >.tableTitle{
  background-color: #f3f3f3;
}

.tableTitle .exportBtn{
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
}
.tableTitle .exportBtn button{
  height: 32px;
  width: 72px;
  background-color: #fff;
  border: 1px #7e6b5a solid;
  border-radius: 16px;
  color: #7e6b5a;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.iconPlus{
  width: 12px;
  height: 12px;
  margin-right: 4px
}
.iconLayout{
  width: 12px;
  height: 12px;
  margin-right: 4px
}

.el-table th .cell{
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;;
  font-size: 14px;
  color: #222
}
.dialog-footer{
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 30px 40px
}

.el-table__row .cell button.bookBtn{
  background-color: #fff;
  color: #7e6b5a;
  border: 1px #7e6b5a solid
}
.tableLayout .el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}
.el-tabs__item{
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
}
/* .checkTabNavs .el-tabs__item{
      position: relative;
  } */
.el-tabs__item:hover{
  color: #7e6b5a
}
.el-tabs--card>.el-tabs__header{
  border: 0;
  margin: 0
}
.customerTabNavs.el-tabs--card>.el-tabs__header .el-tabs__nav,.el-tabs--card>.el-tabs__header .el-tabs__item{
  border: 0;
}
.el-tabs--card>.el-tabs__header .el-tabs__item:focus{
  color: #7e6b5a;
}

.dr-form{
  margin-top: 0 !important;
  /* padding: 10px !important */
}
.el-table th>.cell,.el-table-column--selection .cell{
  display: inline
}

#allCustomer table tr th,#allCustomer table tr td{
  text-align: center
}
.search-cont{
  padding: 16px 0;
  background: #fff;
  margin-bottom: 24px;
  border-radius: 8px
}
.dr-form{
  margin-top: 0;
  padding: 0
}
.formEdit .el-form-item label{
  width: 120px
}

/*普通用户*/
/* .formCustomerOrdinary{
  margin: 40px 0
} */
.formLayout .el-form-item{
  display: flex;
  justify-content: center;
}
/* .formCustomerOrdinary .el-form-item .el-form-item__label{
  width: 106px
}
.formCustomerOrdinary .el-form-item:last-child{
  margin-top:60px
} */
.tableBtn{
  display: flex;
  justify-content: center;
}
.tableBtn button {
    height: 24px;
    width: 58px;
    border-radius: 12px;
    font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin-right: 8px;
    border: 0;
    outline: none;
}
/* .equityEdit{
  	background-color: #222;
		color: #fff;
}
.equityDel{
    color:#999;
    cursor: not-allowed !important;
} */
.editStatus,.equityEnable{
  border:1px #7e6b5a solid !important;
  color:#7e6b5a;
  background:#fff
}
/* .equityEnable{
  color: #fd5846;
  background-color: #fff;
  border:1px #fd5846 solid !important;
} */
.deleteStatus{
  color: #fd5846;
  background-color: #fff;
  border: 1px #fd5846 solid !important;
}
</style>

